﻿<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="服务核销码" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>
        <view class="coreshop-list menu-avatar">
            <view class="coreshop-bg-white coreshop-padding-10 coreshop-solid-bottom coreshop-flex coreshop-justify-between">
                <view class="u-line-2 coreshop-font-weight-bold">{{ info.title }}</view>
                <view class="coreshop-width-fit-content" @click="goServicesDetail(info.id)">
                    <u-button size="mini">详情</u-button>
                </view>
            </view>
            <view class="coreshop-list-item">
                <view class="coreshop-avatar radius lg">
                    <image class='services-img' :src="info.thumbnail" mode="widthFix"></image>
                </view>
                <view class="content">
                    <view class="coreshop-text-gray coreshop-font-sm coreshop-flex coreshop-flex-nowrap">
                        <view class="u-line-3">{{ info.description }}</view>
                    </view>
                </view>
            </view>
            <view class="coreshop-bg-white coreshop-padding-10 coreshop-solid-bottom">
                <view class="coreshop-text-gray coreshop-font-xs coreshop-flex coreshop-flex-nowrap coreshop-padding-10">
                    订单编号：{{serviceOrderId}}
                </view>
                <view class="coreshop-text-gray coreshop-font-xs coreshop-flex coreshop-flex-nowrap coreshop-padding-10">
                    兑换级别：
                    <view class="coreshop-width-fit-content coreshop-padding-right-5" v-if="info.allowedMemberships && info.allowedMemberships.length>0" v-for="(item, index) in info.allowedMemberships" :key="index">
                        <u-tag :text="item" mode="light" size="mini" class="coreshop-margin-right-5" />
                    </view>
                </view>
                <view class="coreshop-text-gray coreshop-font-xs coreshop-flex coreshop-flex-nowrap coreshop-padding-10">
                    兑换门店：
                    <view class="coreshop-width-fit-content coreshop-padding-right-3" v-if="info.consumableStores && info.consumableStores.length>0" v-for="(item, index) in info.consumableStores" :key="index">
                        <view class="coreshop-bg-orange-light sm  coreshop-padding-4 coreshop-margin-right-5">{{item}}</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="coreshop-padding-left-15 coreshop-padding-right-15 coreshop-padding-top-15">
            <u-subsection :list="items" :current="current" :animation="true" @change="onClickItem" active-color="#ff9900"></u-subsection>
        </view>



        <view class="taobao">
            <view class="ticket" :class="item.status==3?'grayscale':''" v-if="listData.length" v-for="(item, index) in listData" :key="index" @click="showQrcodeBox(index)">
                <view class="left">
                    <view class="introduce">
                        <view class="top" v-if="current==0">
                            核销码：<text class="big">{{item.redeemCode}}</text>
                        </view>
                        <view class="topD" v-if="current!=0">
                            核销码：<text class="big">{{item.redeemCode}}</text>
                        </view>
                        <view class="type">{{item.validityType==1?'长期有效':'限时间段内消费'}}</view>
                        <view class="date u-line-1" v-if="item.validityStartTime && item.validityEndTime">{{item.validityStartTime}} 至 {{item.validityEndTime}}</view>
                    </view>
                </view>
                <view class="right  coreshop-flex coreshop-align-center coreshop-justify-center">
                    <view class="coreshop-width-fit-content">
                        <u-button text="正常" type="info" plain size="mini" v-if="item.status==0"></u-button>
                        <u-button text="过期" type="default" plain size="mini" v-if="item.status==1"></u-button>
                        <u-button text="作废" type="warning" plain size="mini" v-if="item.status==2"></u-button>
                        <u-button text="已核销" type="success" plain size="mini" v-if="item.status==3"></u-button>
                    </view>
                </view>
            </view>
            <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
        </view>
        <u-popup :show="show" mode="center" width="180px" height="180px" @close="close">
            <canvas canvas-id="qrcode" style="width: 180px; height: 180px; " />
        </u-popup>
    </view>
</template>

<script>
    import uQRCode from '@/common/utils/uqrcode.js'

    export default {

        computed: {
        },
        data() {
            return {
                items: ['正常', '过期', '作废', '已核销'],
                current: 0,

                page: 1,
                limit: 10,
                listData: [],
                serviceOrderId: '',
                info: {},
                show: false,
                status: 'loadmore',
                iconType: 'flower',
                loadText: {
                    loadmore: '轻轻上拉',
                    loading: '努力加载中',
                    nomore: '实在没有了'
                }
            };
        },
        onLoad(e) {
            this.serviceOrderId = e.id;
            this.getServicesById();
            this.getServicesTickets();
        },
        onShow() {
        },
        onReachBottom() {
            if (this.status === 'loadmore') {
                this.getServicesTickets()
            }
        },
        methods: {
            // tab点击切换
            onClickItem(index) {
                if (this.current !== index) {
                    this.current = index;
                    this.page = 1;
                    this.listData = [];
                    this.getServicesTickets();
                }
            },
            getServicesById() {
                let _this = this;
                let data = {
                    id: this.serviceOrderId
                }
                this.$u.api.getServicesById(data).then(res => {
                    if (res.status) {
                        this.info = res.data;
                    } else {
                        _this.$u.toast(res.msg)
                    }
                })
            },
            getServicesTickets() {
                let _this = this;
                let data = {
                    id: this.serviceOrderId,
                    status: this.current,
                    page: this.page,
                    limit: this.limit
                }
                this.status = 'loading'

                this.$u.api.getServicesTickets(data).then(res => {
                    if (res.status) {
                        let _list = res.data
                        this.listData = [...this.listData, ..._list]

                        if (res.data.count > _this.listData.length) {
                            _this.page++
                            _this.status = 'loadmore'
                        } else {
                            _this.status = 'nomore'
                        }
                    } else {
                        _this.$u.toast(res.msg)
                    }
                })
            },
            close() {
                this.show = false
            },
            showQrcodeBox(index) {
                if (this.current != 0) {
                    return;
                }
                let _this = this;
                var item = _this.listData[index];
                if (item.status == 0) {
                    _this.make(item.redeemCode);
                    _this.show = true;
                }
            },
            make(textStr) {
                console.log(textStr);
                console.log(uQRCode);
                uQRCode.make({
                    canvasId: 'qrcode',
                    componentInstance: this,
                    text: textStr,
                    size: 180,
                    margin: 30,
                    backgroundColor: '#ffffff',
                    foregroundColor: '#000000',
                    fileType: 'jpg',
                    correctLevel: uQRCode.errorCorrectLevel.H,
                    success: res => {
                        console.log(res)
                    }
                })
            }
        }
    };
</script>

<style lang="scss" scoped>
    @import "details.scss";
</style>
